<template>
	<div @click="gotoPage('waste')" class="point pl10 pr10 mb12" v-loading="loading4"
		style="width: 50%;display: inline-block;vertical-align: top;">
		<div class="displayFlex mb18 pl10">
			<div style="font-size: 15px;color: #5A5A5A;">一般工业固废</div>
			<div v-if="listHeaderMock.mock4" style="color: #888;" class="font12 ml10">以下数据为演示数据</div>
		</div>

		<div style="display: flex;justify-content: space-between;">
			<div style="width: 538px;padding: 25px 20px;border-radius: 20px;height: 290px" class="bgfff">
				<div class="" style="padding-left: 20px;">
					<div class="font14" style="color: #5A5A5A;">
						<span>产生量</span>
						<span class="font18"
							style="color: #5A5A5A;">{{ swData.produce.amount ? swData.produce.amount.toFixed(1) : '0' }}t</span>
					</div>
					<div style="color: #A1A1A1;text-align: right;">
						计划量{{ swData.produce.totalAmount ? swData.produce.totalAmount.toFixed(1) : '0' }}t</div>
				</div>

				<div style="width: 100%;height: 16px;background: #EDECF1;margin: 2px 0 0 0;position: relative;">
					<div :style="{'width':(swData.produce.percent?swData.produce.percent:0) +'%'}"
						style="position: absolute;top : 0;left : 0;height: 16px;background: #8AD4F1;border-radius: 0px 8px 8px 0px">
					</div>
				</div>
				<div id="piechart12" style="width: 100%;height: 180px;margin: 15px 0;"></div>
			</div>

			<div style="margin-left: 12px;background: #FDD92A;border-radius: 20px;padding: 30px 20px;width: 388px;color: #5A5A5A;">
				<div class=" mb20" style="text-align: left;">
					<span class="font20">{{swData.swUse.usePercent}}%</span>
					<span>资源利用率</span>
				</div>
				
				<div style="background: #fff;border-radius: 8px;position: relative;height: 32px;">
					<div :style="{'width':swData.swUse.usePercent+'%'}"
						style="height: 32px;background: linear-gradient(-90deg, #FD4851, #FF8C54, #FFDE00, #33D5AC, #0878F5);border-radius: 8px;">
					</div>
				</div>
				
				<div style="width: 100%;">
					<div class="font14" v-for="(item,index) in swData.swUse.list"
						style="width: 50%; text-align: left;display: inline-block;margin-top: 24px;">
						<div>{{item.type}}</div>
						<div>{{item.count}}t</div>
					</div>
				</div>
			</div>
		</div>

		<div class="displayFlex mt12"
			style="width: 100%;height: 124px;background: #fff;border-radius: 20px;padding: 18px 30px;">
			<div class="font14" style="color: #A1A1A1;">
				<div>库存</div>
				<div style="color: #5A5A5A;" class="font18 mt11">
					{{ swData.storage.totalAmount ? swData.storage.totalAmount.toFixed(1) : '0' }}
				</div>
			</div>

			<div class="textCenter" style="position: relative;margin-left: 90px;">
				<el-progress type="circle" :percentage="40" color="#FD7A45" :width="90" :stroke-width="8"
					:show-text="false"></el-progress>
				<div style="position: absolute;top: 25%;left: 0%;text-align: center;right: 0; color:#A1A1A1;">
					<div>占库率</div>
					<div style="color: #333;font-size: 14px;">{{swData.storage.storagePercent}}%</div>
				</div>
			</div>

			<div style="margin-left: 30px;">
				<div class="font14 mb5" v-if="swData.storage.list && swData.storage.list.length > 0"
					v-for="(item,index) in swData.storage.list" :key="index">
					<span style="color: #A1A1A1;">{{ item.type }}</span>
					<span style="color: #5A5A5A;" class="ml10">{{ item.count.toFixed(1) }}t</span>
				</div>
			</div>

			<div ref="waterQualityLevelChart1" style="width: 96px;height: 96px;margin-left: 120px;"></div>

			<div class="font14 ml20">
				<div style="color: #A1A1A1;">超期库存</div>
				<div style="color: #5A5A5A;" class="font18 mt11">
					{{ swData.storage.overOneYearAmount ? swData.storage.overOneYearAmount.toFixed(1) : '0' }}t
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import 'echarts-liquidfill';

	import HomeMock from "@/assets/mock/HomeMock.json"
	let that

	export default {
		data() {
			return {
				loading4: true,
				listHeaderMock: {
					mock4: false
				},
				swData: {
					swUse: {
						wasteList:[]
					},
					produce: {
						amount: 0,
						totalAmount: 0
					},
					dispose: [],
					storage: {
						totalAmount: 0,
						overOneYearAmount: 0,
						list: []
					}
				},
			}
		},
		mounted: function() {
			that = this
			that.loadData()
		},

		methods: {

			// 获取所有数据
			async loadData() {
				try {
					// 并行获取所有数据
					await Promise.all([
						this.fetchSwProduce(),
						this.fetchSwInStorage(),
						this.countSwUse()
					]);
					that.loading4 = false
				} catch (error) {
					console.error('获取数据失败', error);
				}
			},

			async countSwUse() {
				try {
					that.ajax({
						url: 'homepage/countSwUse',
						data: JSON.stringify({}),
						contentType: 'application/json',
						success(res) {
							if (res.status === 1 && res.data) {
								that.swData.swUse = res.data;
							}
						}
					});
				} catch (error) {
					console.error('获取危废产生数据失败', error);
				}
			},

			// 获取危废产生数据
			async fetchSwProduce() {
				try {
					that.ajax({
						url: 'homepage/countSwProduce',
						data: JSON.stringify({}),
						contentType: 'application/json',
						success(res) {
							if (res.status === 1 && res.data) {
								that.swData.produce = res.data;
								
								for (let item of that.swData.produce.list) {
									item.name = item.type
									item.value = item.count
								}
								that.formPieChart2("piechart12", that.swData.produce.list)
							}
						}
					});
				} catch (error) {
					console.error('获取危废产生数据失败', error);
				}
			},


			// 获取危废在库数据
			async fetchSwInStorage() {
				try {
					that.ajax({
						url: 'homepage/countSwInStorage',
						data: JSON.stringify({

						}),
						contentType: 'application/json',
						success(res) {
							if (res.status === 1 && res.data) {
								that.swData.storage = res.data;

								const charts = that.$refs.waterQualityLevelChart1;
								that.createLiquidFillChart(charts, that.swData.storage.overOneYearPercent);
							}
						}
					});
				} catch (error) {
					console.error('获取危废在库数据失败', error);
				}
			},

			gotoPage(type) {
				//console.log(type)
				let routerUrl = "filesManage/pdfManage"
				if (type == 'risk') routerUrl = "riskPreview/risk"
				if (type == 'monitorPollution') routerUrl = "produceManage/producePreview"
				if (type == 'waste') routerUrl = "waste/wasteOrder"
				if (type == 'swEntWaste') routerUrl = "swEntWaste/order"
				if (type == 'produceOrder') routerUrl = "produceManage/order"
				if (type.includes("废气")) {
					if (type.includes("在线监测")) routerUrl = "/wasteGas/onlineSurvey"
					if (type.includes("自行监测")) routerUrl = "/wasteGas/survey"
					if (type.includes("台账")) routerUrl = "/wasteGas/order"
					if (type.includes("巡检")) routerUrl = "/entScheduleAddPlan"
				}
				if (type.includes("废水")) {
					if (type.includes("在线监测")) routerUrl = "/wasteWater/onlineSurvey"
					if (type.includes("自行监测")) routerUrl = "/wasteWater/survey"
					if (type.includes("台账")) routerUrl = "/wasteWater/order"
					if (type.includes("巡检")) routerUrl = "/entScheduleAddPlan"
				}
				if (type.includes("巡检计划")) routerUrl = "/entScheduleAddPlan"
				if (type.includes("巡检任务")) routerUrl = "/entScheduleAddPlan"

				if (routerUrl) {
					routerUrl = routerUrl + "?ticketId=" + this.$store.state.token
					that.$router.push(routerUrl)
				}
			},

			// 创建水球图表
			createLiquidFillChart(chartDom, data) {
				data = Number(data.toFixed(2))
				const chart = echarts.init(chartDom);
				const option = {
					series: [{
						type: 'liquidFill',
						data: [data],
						radius: '80%',
						amplitude: 0,
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								color: 'none',
								borderColor: '#8AD4F1',
								borderWidth: 2
							}
						},
						itemStyle: {
							opacity: 0.95,
							shadowBlur: 50,
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 1,
									color: '#8AD4F1'
								}, {
									offset: 0,
									color: '#62BADC'
								}],
								global: false
							}
						},
						label: {
							normal: {
								formatter: '{c}%',
								textStyle: {
									fontSize: 12,
									color: '#FFFFFF'
								}
							}
						}
					}]
				};

				chart.setOption(option);
			},

			formPieChart2(chartId, dataList, type = "one") {
				console.log(chartId, dataList,"ddddd")
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						type: 'scroll',
						orient: 'vertical',
						left: 235,
						top: 10,
						icon: 'rect',

						itemHeight: 6,
						formatter: function(name) { // 添加
							let total = 0
							let target
							let percent
							for (let i = 0; i < dataList.length; i++) {
								total += dataList[i].value
							}
							for (let i = 0; i < dataList.length; i++) {
								if (dataList[i].name === name) {
									target = dataList[i].value
									percent = Number(((target / total) * 100).toFixed(2))
								}
							}
							var arr = [
								'{a|' + name + '}{c|' + target + 't}{b|' + percent + '%}'
							]
							return arr.join('  ')
						},
						textStyle: { // 添加
							padding: [0, 0, 0, 0],
							rich: {
								a: {
									width: 70,
									color: '#777',
									fontSize: 14,

								},
								b: {
									fontSize: 14,
									color: '#5A5A5A',
									width: 70,
								},
								c: {
									width: 70,
									fontSize: 14,
									color: '#777',
								}
							}
						}
					},

					series: [{
						type: 'pie',
						center: ['20%', '50%'],
						radius: ['00%', '80%'],
						label: {
							show: false,
							position: 'center'
						},
						labelLine: {
							show: false
						},
						data: dataList,
						color: ['#36B37E', '#04E38A', '#9DFF86', '#D1D1D1'],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				option && myChart.setOption(option);
			},

		}
	}
</script>

<style scoped>
	.progress-bar {
		position: relative;
		width: 80px;
		height: 100px;
		background-color: #F6F7FB;
		border-radius: 4px;
	}

	.progress-bar .progress {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #FFA200;
		transition: height 0.3s ease;
		overflow: hidden;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	/* 伪元素用于创建进度条边缘圆角效果 */
	.progress-bar .progress::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #FFA200;
		border-radius: 5px;
	}
</style>